<style lang="less">
    @import "./styles/menu.less";
</style>

<template>
    <div
            :style="{ background: bgColor }"
            :class="`shrinkable-menu ${theme}-menu`"
    >
        <slot name="top"></slot>
        <sidebar-menu
                v-show="!shrink"
                :theme="theme"
                :menu-list="menuList"
                :open-names="openNames"
                @on-change="handleChange"
        ></sidebar-menu>
        <sidebar-menu-shrink
                v-show="shrink"
                :theme="theme"
                :menu-list="menuList"
                :open-names="openNames"
                @on-change="handleChange"
        ></sidebar-menu-shrink>
    </div>
</template>

<script>
    import sidebarMenu from "./components/sidebarMenu.vue";
    import sidebarMenuShrink from "./components/sidebarMenuShrink.vue";

    export default {
        name: "shrinkableMenu",
        components: {
            sidebarMenu,
            sidebarMenuShrink,
        },
        props: {
            shrink: {
                type: Boolean,
                default: false,
            },
            menuList: {
                type: Array,
                required: true,
            },
            theme: {
                type: String,
                default: "darkblue",
            },
            beforePush: {
                type: Function,
            },
        },
        data() {
            return {
                openNames: [],
            };
        },
        computed: {
            bgColor() {
                if (this.theme == "darkblue") {
                    return "#17233d";
                } else if (this.theme == "dark") {
                    return "#515a6e";
                } else if (this.theme == "black") {
                    return "#1f1f1f";
                }
                return "#fff";
            },
        },
        methods: {
            handleChange(name) {
                let willpush = true;
                if (this.beforePush !== undefined) {
                    if (!this.beforePush(name)) {
                        willpush = false;
                    }
                }
                if (name == this.$route.name) {
                    willpush = false;
                }
                if (willpush) {
                    this.$router.push({
                        name: name,
                    });
                }
                this.$emit("on-change", name);
            },
        },
        watch: {
            // 监听路由变化
            $route(to, from) {
                this.openNames = [this.$route.matched[0].name];
            },
        },
        mounted() {
            this.openNames = [this.$route.matched[0].name];
        },
    };
</script>
